<template>
    <el-dialog
        :close-on-click-modal="false"
        title="新增"
        :visible.sync="dialogVisible"
        class="re-dialog"
        width="900px"
    >
        <div class="add-dialog">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-row>
                  <el-col :span="12" v-for="(sItem,index) in formConfig" :key="index">
                    <el-form-item v-bind:label="sItem.label" v-bind:prop="sItem.code">
                        <el-input
                            v-if="sItem.type === 'input'"
                            v-bind:placeholder="sItem.placeholder"
                            v-model="ruleForm[sItem.code]"
                            :maxlength="sItem.maxlength"
                        ></el-input>
                        <el-input
                            v-if="sItem.type == 'textarea'"
                            type="textarea"
                            style="resize:none"
                            :placeholder="sItem.placeholder"
                            v-model="ruleForm[sItem.code]"
                            :maxlength="sItem.maxlength"
                            show-word-limit
                        />
                        <el-select
                            class="w-100"
                            v-else-if="sItem.type === 'select'"
                            v-model="ruleForm[sItem.code]"
                            v-bind:placeholder="sItem.placeholder"
                        >
                            <el-option
                                v-for="(ssItem,ssIndex) in sItem.data"
                                :key="ssIndex"
                                v-bind:label="ssItem.dictDataName"
                                v-bind:value="ssItem.dictDataCode"
                            ></el-option>
                        </el-select>
                        <el-date-picker
                            class="w-100"
                            v-else-if="sItem.type === 'datePicker'"
                            v-model="ruleForm[sItem.code]"
                            type="date"
                            size="small"
                            :placeholder="sItem.placeholder"
                            value-format="yyyy-MM-dd"
                        ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <button class="footer-btn cancel" @click="dialogVisible = false">取 消</button>
                <button @click="onSubmit('ruleForm')" class="footer-btn sure">确 定</button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import {
    findByDictCode,
    ZHZXEventInfoAdd,
    ZHZXEventInfoEdit,
    departmentGetDepartment,
    ZHZXEventInfoEventNumberCanUse,
} from "../../config/api.js";
import { invalid,getTimeStr } from "../../utils";

export default {
    data() {
        var validateEventNumber = (rule, eventNumber, callback) => {
            if (!eventNumber) {
                return callback(new Error("工单号不能为空"));
            }
            setTimeout(() => {
                if (!/^[0-9]\d*$/.test(eventNumber)) {
                    callback(new Error("请输入数字"));
                } else {
                    this.hasEventNumber({eventNumber}, data => {
                        if (data) {
                            callback();
                        } else {
                            return callback(new Error("工单号已存在"));
                        }
                    });
                }
            }, 800);
        };
        let validatorPhone = (rule, value, callback) => {
            console.log('valuevalue',value,invalid.allPhone);
            if (value && !invalid.allPhone.test(value)) {
                callback(new Error("请输入正确的号码"));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            toggle: false,
            defaultShowList: [],
            fileList: [],
            formConfig: [
                {
                    label: "工单号：",
                    type: "input",
                    placeholder: "请输入工单号",
                    code: "eventNumber",
                    maxlength: 32
                },
                {
                    label: "事件标题：",
                    type: "input",
                    placeholder: "请输入事件标题",
                    code: "eventTitle",
                    maxlength: 32
                },
                {
                    label: "事件类别：",
                    type: "select",
                    placeholder: "请选择事件类别",
                    code: "eventType",
                    data: []
                },

                {
                    label: "事件描述：",
                    type: "textarea",
                    placeholder: "请输入事件描述",
                    code: "eventDesc",
                    maxlength: 2000
                },
                {
                    label: "事件关键词：",
                    type: "input",
                    placeholder: "请输入事件关键字",
                    code: "eventKeyword",
                    maxlength: 16
                },
                {
                    label: "处理单位：",
                    type: "select",
                    placeholder: "请选择处理单位",
                    code: "disposalUnitCode",
                    data: []
                },
                {
                    label: "事件来源：",
                    type: "select",
                    placeholder: "请选择来源",
                    code: "eventSourceCode",
                    data: []
                },
                {
                    label: "反应人电话：",
                    type: "input",
                    placeholder: "请输入电话",
                    code: "telNo",
                    maxlength: 16
                },
                {
                    label: "反应人：",
                    type: "input",
                    placeholder: "请输入反应人",
                    code: "reporterName",
                    maxlength: 16
                },
                {
                    label: "本级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "myLimitTime"
                },
                {
                    label: "市级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "highLimitTime"
                }
            ],
            error: {
                tips: ""
            },
            ruleForm: {
                eventNumber: "",
                eventTitle: "",
                eventType: "",
                eventDesc: "",
                eventKeyword: "",
                disposalUnitCode: "",
                eventSourceCode: "",
                telNo: "",
                reporterName: "",
                telId: "",
                myLimitTime: "",
                highLimitTime: "",
            },
            rules: {
                eventNumber: [
                    {
                        required: true,
                        message: "请输入工单号",
                        trigger: "change"
                    },
                    { validator: validateEventNumber, trigger: "change" }
                ],
                eventTitle: [
                    {
                        required: true,
                        message: "请输入事件标题",
                        trigger: "change"
                    }
                ],
                eventType: [
                    {
                        required: true,
                        message: "请选择事件类别",
                        trigger: "change"
                    }
                ],
                eventDesc: [
                    {
                        required: true,
                        message: "请输入事件描述",
                        trigger: "change"
                    }
                ],
                eventKeyword: [
                    {
                        required: true,
                        message: "请输入事件关键字",
                        trigger: "change"
                    }
                ],
                disposalUnitCode: [
                    {
                        required: true,
                        message: "请选择处理单位",
                        trigger: "change"
                    }
                ],
                eventSourceCode: [
                    {
                        required: true,
                        message: "请选择来源",
                        trigger: "change"
                    }
                ],
                reporterName: [
                    {
                        required: true,
                        message: "请填写反应人",
                        trigger: "change"
                    }
                ],
                telNo: [{
                        required: true,
                        message: "请填写电话",
                        trigger: "change"
                    },{ validator: validatorPhone, trigger: "change" }],
                myLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                highLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
            },
            mailTypeCode: [], //取件类型
            items: {},
            isCreate: true
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "addincidentRegister",
            (type, values) => {
                console.log('addincidentRegister',values);
                if (values.isCreate) {
                    this.ruleForm = {};
                    this.isCreate = true,
                        setTimeout(() => {
                        this.$refs.ruleForm.clearValidate(); //重置
                        }, 0);
                } else {
                    const { item = {} } = values;
                    this.items = item;
                    (this.isCreate = false),
                        (this.ruleForm = {
                            eventNumber: item.eventNumber,
                            eventTitle: item.eventTitle,
                            eventType: item.eventType,
                            eventDesc: item.eventDesc,
                            eventKeyword: item.eventKeyword,
                            disposalUnitCode: item.disposalUnitCode,
                            eventSourceCode: item.eventSourceCode,
                            telNo: item.telNo || "",
                            reporterName: item.reporterName || "",
                            telId: item.telId || "",
                            myLimitTime:getTimeStr(item.myLimitTime,"yyyy-MM-dd")||'',
                            highLimitTime:getTimeStr(item.highLimitTime,"yyyy-MM-dd")||'',
                        });
                }
                this.getDictCode();
                this.dialogVisible = true;
            }
        );
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 判断工单号是否存在
         */
        hasEventNumber(res, cb) {
            if(!this.isCreate){res.id=this.items.id||''};
            ZHZXEventInfoEventNumberCanUse(res).then((res = {}) => {
                cb(res.data);
            });
        },
        /**
         * 提交
         */
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    const { isCreate, ruleForm, items } = this;
                    if (isCreate) {
                        ZHZXEventInfoAdd(ruleForm).then(res => {
                            this.$message({
                                message: "新增成功",
                                type: "success"
                            });
                            this.dialogVisible = false;
                            this.$emit("callback");
                        });
                    } else {
                        ZHZXEventInfoEdit({ ...ruleForm, id: items.id }).then(
                            res => {
                                this.$message({
                                    message: "编辑成功",
                                    type: "success"
                                });
                                this.dialogVisible = false;
                                this.$emit("callback");
                            }
                        );
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            findByDictCode({ dictCode: "eventType" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventType").data =
                    res.data || [];
            });
            findByDictCode({ dictCode: "eventSourceCode" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventSourceCode").data =
                    res.data || [];
            });
            departmentGetDepartment({}).then((res = {}) => {
                let { data } = res;
                if (data && data.length) {
                    data.map((item, index) => {
                        item.dictDataName = item.name;
                        item.dictDataCode = item.id;
                    });
                    this.formConfig.find(
                        item => item.code == "disposalUnitCode"
                    ).data = data || [];
                }
            });
        }
    }
};
</script>

<style lang = "scss" scoped>
.add-dialog {
    .dialog-footer {
        margin-top: 0;
    }
    .el-label {
        display: inline-block;
        width: 140px;
        text-align: right;
        padding-right: 12px;
        box-sizing: border-box;
    }
    .row {
        margin-bottom: 45px;
        font-size: 12px;
        /* display: flex;
    align-items: center; */
    }
    .w-100 {
        width: 100%;
    }
    .default-placholder {
        color: #c1c5cc;
        padding-left: 15px;
    }
    .windos-text {
        padding-left: 15px;
    }
    .select-row {
        height: 34px;
        border: 1px solid #d2d2d2;
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;
        .slideup-wrapper {
            transition: height 0.2s ease-in-out;
            z-index: 999;
            height: 0;
            position: absolute;
            top: calc(100% + 6px);
            width: 305px;
            border: none;

            margin-left: -1px;
            padding: 2px;
            box-sizing: border-box;

            &.slideup {
                height: 118px;
                border: 1px solid #d2d2d2;

                .triangle {
                    opacity: 1;
                }
            }
        }
        .select-ul-wrapper {
            height: 100%;
            background: #fff;

            /* display: none; */
            overflow: hidden;
        }
        .triangle {
            opacity: 0;
            position: absolute;
            height: 0;
            width: 0;
            top: -6px;
            left: 50%;
            margin-left: -6px;
            border-bottom: 6px solid #d2d2d2;
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            &:after {
                content: "";
                position: absolute;
                height: 0;
                width: 0;
                border-bottom: 5px solid #fff;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                left: -5px;
                top: 1px;
            }
        }
        .select-ul {
            display: flex;
            li {
                flex: 1;
                margin: 2px;
                background: #eeeeee;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &.active {
                    background: #1a36a9;
                    color: #fff;
                }
            }
        }
    }
    .footer-btn {
        width: 66px;
        height: 32px;
        border-radius: 3px;
        &:active {
            opacity: 0.8;
        }
    }
    .sure {
        background-color: #1a36a9;
        color: #fff;
    }
    .cancel {
        background-color: #d2d2d2;
        margin-right: 40px;
    }
}
</style>
<style>
.radio-li span {
    font-size: 12px !important;
    color: #606266;
}
.re-dialog .el-form-item {
    margin-bottom: 19px !important;
}
.re-dialog .el-dialog__body {
    padding-bottom: 0 !important;
}
.re-dialog .el-dialog__footer {
    border-top: 1px solid #eee;
    padding: 20px !important ;
}
.re-dialog .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
}
.el-form-item__content,
.el-form-item__label {
    line-height: 34px;
}

.is-error .select-row {
    border-color: #f56c6c;
}
</style>
